<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<script src="./scripts/vue.js"></script>
		<!-- 1. 引入js库 -->
		<script src="./scripts/vue-router_3.0.2.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 2. 创建路由标签 -->
			<router-link to="/login">登录</router-link>
			<router-link to="/register">注册</router-link>

			<!-- 3. 创建路由占位符、填充位 -->
			<router-view></router-view>
		</div>

		<script>
			// 4. 创建组件
			var Login = {
				template: `
          <h4>登录</h4>
        `
			}

			// 嵌套路由：就是在父路由中对应的组件中，还存在子路由,存在一个父子嵌套的关系

			// 使用方式：子路由在 router-link 中定义时，to 属性 前面需要跟上父路由

			var Register = {
				template: `
          <div>
            <h4>注册</h4>
            <hr>

            <!-- 子路由标签 -->
            <router-link to="/register/tab1">Tab1</router-link>
			      <router-link to="/register/tab2">Tab2</router-link>

            <!-- 子路由占位符 -->
			      <router-view></router-view>
          </div>
          
        `
			}

			var Tab1 = {
				template: `
          <h5>Tab1</h5>
        `
			}
			var Tab2 = {
				template: `
          <h5>Tab2</h5>
        `
			}

			// 5. 创建路由规则
			var router = new VueRouter({
				// 配置路由规则
				routes: [
					// ★ 重定向 redirect
					{ path: '/', redirect: '/login' },
					{ path: '/login', component: Login },
					{
						path: '/register',
						component: Register,
						children: [
							// // 嵌套路由：父子嵌套，路由前面需要加上父级的路由
							// { path: '/register/tab1', component: 'Tab1' },
							// { path: '/register/tab2', component: 'Tab2' }

							// 这个简写版是官方推荐的标准写法
							// 如果是推荐写法，前面不需要带斜线
							{ path: 'tab1', component: Tab1 },
							{ path: 'tab2', component: Tab2 }
						]
					}
				]
			})

			var vm = new Vue({
				el: '#app',
				data: {},
				// 6. 将 vue-router 规则挂载到 Vue 实例中
				router
			})
		</script>
	</body>
</html>
